<template>
  <div id="memberRecord">
        <div>
            <el-card class="box-card">
                <el-row>
                    <el-col :span="1"  style="margin-top:10px;"><span style="font-size:14px;font-weight:bold;">会员名称</span></el-col>
                    <el-col :span="3">
                        <el-input
                            placeholder="请输入会员名称"
                            v-model="memberName"
                            clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="1"  style="margin-top:10px;margin-left:15px;"><span style="font-size:14px;font-weight:bold;">开通账号</span></el-col>
                    <el-col :span="3">
                        <el-input
                            placeholder="请输入开通账号"
                            v-model="userName"
                            clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="2"  style="margin-top:10px;margin-left:15px;"><span style="font-size:14px;font-weight:bold;">开通时间范围</span></el-col>
                    <el-col :span="8">
                        <el-date-picker
                            v-model="startOpenTime"
                            align="right"
                            type="date"
                            placeholder="选择购买会员起始日期"
                            :picker-options="pickerOptions"
                            placement="bottom-end">
                        </el-date-picker>
                        <span style="margin-left:20px;">至</span>
                        <el-date-picker
                            style="margin-left:20px;"
                            v-model="overOpenTime"
                            align="right"
                            type="date"
                            placeholder="选择购买会员结束日期"
                            :picker-options="pickerOptions"
                            placement="bottom-end">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="2"><el-button icon="el-icon-search" @click="getMemberRecordByPage" circle></el-button></el-col>
                </el-row>
                <el-row style="margin-top:20px;">
                    <el-table
                        :data="memberRecordData"
                        style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="开通账号">
                                        <span>{{props.row.userName}}</span>
                                    </el-form-item>
                                    <el-form-item label="会员名称">
                                        <span>{{ props.row.memberName }}</span>
                                    </el-form-item>
                                    <el-form-item label="购买月份">
                                        <span>{{ props.row.month }}</span>
                                    </el-form-item>
                                    <el-form-item label="价钱">
                                        <span>{{ props.row.price }}</span>
                                    </el-form-item>
                                    <el-form-item label="开通时间">
                                        <span>{{ props.row.createTime }}</span>
                                    </el-form-item>
                                    <el-form-item label="过期时间">
                                        <span>{{ props.row.expirationTime|formatDate('yyyy-MM-dd HH:mm:ss') }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="购买会员类型"
                            prop="memberName">
                        </el-table-column>
                        <el-table-column
                            label="开通日期"
                            prop="createTime">
                        </el-table-column>
                        <el-table-column
                            label="购买月份"
                            prop="month">
                        </el-table-column>
                        <el-table-column
                            label="价钱"
                            prop="price">
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row style="text-align: center;">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
                    </el-pagination>
                </el-row>
            </el-card>
        </div>
  </div>
</template>

<script>
const axios = require('axios')
export default {
  name: 'memberRecord',
  data () {
    return {
      // 分页模糊查查询字段（会员名称）
      memberName: '',
      // 分页模糊查查询字段（开通账号）
      userName: '',
      // 分页模糊查查询字段（起始的开通时间）
      startOpenTime: '',
      // 分页模糊查查询字段（结束的（开通时间））
      overOpenTime: '',
      // 分页全查存放的数组
      memberRecordData: [],
      // 查看弹框true弹出
      dialogFormVisibleDatil: false,
      formLabelWidth: '120px',
      // 分页当前选中页
      currentPage4: 1,
      page: {
        pageSize: 10, // 条数
        pageNum: 1, // 页数
        total: 0
      },
      tatal: 0,
      // 时间选择器默认值
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      // 查询会员类型结果
      memberTypeList: []

    }
  },
  methods: {
    // 设置时间为当天时间为23：59：59
    timeSet (value) {
      const date = new Date(value) // new Date(value*1000);根据时间戳格式进行选择乘1000或否
      let timeDate
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = 23 + ':'
      const m = 59 + ':'
      const s = 59
      timeDate = Y + M + D + h + m + s
      return timeDate
    },
    // 设置时间为当天时间为0:0:0
    timeSet1 (value) {
      const date = new Date(value) // new Date(value*1000);根据时间戳格式进行选择乘1000或否
      let timeDate
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = 0 + ':'
      const m = 0 + ':'
      const s = 0
      timeDate = Y + M + D + h + m + s
      return timeDate
    },
    // 分页
    handleSizeChange (ps) {
      this.page.pageSize = ps
      this.getMemberRecordByPage()
      console.log(`每页 ${ps} 条`)
    },
    handleCurrentChange (pn) {
      this.page.pageNum = pn
      this.getMemberRecordByPage()
    },
    // 会员卡详情分页查+模糊查（会员卡名称）
    getMemberRecordByPage () {
      debugger
      if (this.overOpenTime === '' || this.overOpenTime === null) {
        this.overOpenTime = this.timeSet(new Date())
      }
      if (this.overOpenTime !== '') {
        this.overOpenTime = this.timeSet(this.overOpenTime)
      }
      if (this.startOpenTime === null) {
        this.startOpenTime = ''
      }
      if (this.startOpenTime !== '') {
        this.startOpenTime = this.timeSet1(this.startOpenTime)
      }
      this.$axios.get('http://127.0.0.1:15000/eat-service/memberRecord/getMemberRecordByPage', {
        params: {
          memberName: this.memberName,
          userName: this.userName,
          startOpenTime: this.startOpenTime,
          overOpenTime: this.overOpenTime,
          pageSize: this.page.pageSize,
          pageNum: this.page.pageNum
        }
      })
        .then((res) => {
          this.memberRecordData = res.data.content
          this.page.total = res.data.total
        })
    },
    // 消息提示框
    message (message, type) {
      this.$message({
        message: message,
        type: type
      })
    }
  },
  // 初始化加载数据
  mounted () {
    // 分页全查+模糊查（会员卡名称）
    this.getMemberRecordByPage()
  },
  // 格式化时间
  filters: {
    formatDate: function (value, args) {
      const dt = new Date(value)
      if (args == 'yyyy-M-d') { // yyyy-M-d
        const year = dt.getFullYear()
        const month = dt.getMonth() + 1
        const date = dt.getDate()
        return `${year}-${month}-${date}`
      } else if (args == 'yyyy-M-d H:m:s') { // yyyy-M-d H:m:s
        const year = dt.getFullYear()
        const month = dt.getMonth() + 1
        const date = dt.getDate()
        const hour = dt.getHours()
        const minute = dt.getMinutes()
        const second = dt.getSeconds()
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`
      } else if (args == 'yyyy-MM-dd') { // yyyy-MM-dd
        const year = dt.getFullYear()
        const month = (dt.getMonth() + 1).toString().padStart(2, '0')
        const date = dt.getDate().toString().padStart(2, '0')
        return `${year}-${month}-${date}`
      } else { // yyyy-MM-dd HH:mm:ss
        const year = dt.getFullYear()
        const month = (dt.getMonth() + 1).toString().padStart(2, '0')
        const date = dt.getDate().toString().padStart(2, '0')
        const hour = dt.getHours().toString().padStart(2, '0')
        const minute = dt.getMinutes().toString().padStart(2, '0')
        const second = dt.getSeconds().toString().padStart(2, '0')
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`
      }
    }
  }
}
</script>
<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
